<template>
 
   <!-- id: "9184756624383621"
img: "http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png"
link: "https://jspang.com"
title: "京东到家" -->

  <div class="hotproduct">
    <h3>{{title}}</h3>
    <div class="hot-container">
      <ul class="clear-fix">
                        <li v-for='(item,index) in data' :key="index">
                            <a :href="item.link">
                                <img   :src='item.img'/>
                                <span>{{item.title}}</span>
                            </a>
                        </li>
                     
      </ul>
    </div>
  </div>
</template>

<script>
export default {
    props:['data','title'],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped   lang='less'>
.hotproduct {
  h3 {
    margin-top: 10px;
    font-size: 15px;
    font-weight: normal;
    text-align: center;
  }
  .hot-container {
    padding: 15px;
    background: #fff;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 1px #e1e1e1;
    ul {
      li {
        width: 25%;
        overflow: hidden;
        padding: 5px;
        float: left;
        a {
          img {
            width: 100%;
          }
          span {
            display: block;
            text-align: center;
            font-size: 15px;
          }
        }
      }
    }
  }
}
</style>
